<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>使用XMLHttpRequest</title>
        <meta name="auther" content="wangjiale"/>
        <meta name="description" content="A simper example"/>
    </head>
    <body>
        <div>
            <button>Apples</button>
            <button>Cherries</button>
            <button>Bananas</button>
        </div>
        <div id="target">Press a button</div>
        <script>
            var buttons=document.getElementsByTagName("button");
            for(i=0; i<buttons.length; i++){
                buttons[i].onclick=handleButtonPress;
            }
            function handleButtonPress(e){
                var httpRequest= new XMLHttpRequest();
                httpRequest.onreadystatechange=handleResponse;
                httpRequest.open("GET",e.target.innerHTML+".html");
                httpRequest.send();
            }
            function handleResponse(e){
                if(e.target.readyState==XMLHttpRequest.DONE && e.target.status==200){
                    document.getElementById("target").innerHTML=e.target.responseText;
                }
            }
        </script>
    </body>
</html>